<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML5 dataset下的数据图效果实例页面</title>
		<style type="text/css">
			#top {
				width: 600px;
				padding: 1em;
				margin: 2em auto 10em;
				background-color: #cad5eb;
				text-align: center;
			}
			
			#title {
				padding-bottom: 1em;
				font: bold 14px/1.5 '幼圆', '微软雅黑';
				color: #800;
			}
			
			#unsupport strong {
				display: block;
				padding: 20px;
				background-color: #c80;
				color: #fff;
			}
			
			#dataset {
				width: 600px;
				height: 400px;
				margin: 2em auto;
				position: relative;
				text-shadow: none;
				text-align: center;
			}
			
			#dataset b {
				position: absolute;
				text-transform: uppercase;
				width: 1em;
				height: 1em;
				font-weight: normal;
				border-radius: 1em;
				line-height: 1em;
				-o-transition: font-size 1s;
				-webkit-transition: all 1s;
				-moz-transition: font-size 1s;
				-ms-transition: font-size 1s;
				transition: font-size 1s;
			}
			
			#dataset b i,
			#dataset b:after {
				font-size: 14px;
				position: absolute;
				right: 0;
				left: 0;
				margin-top: -7px;
				font-style: normal;
				font-weight: normal;
			}
			
			#dataset b:after {
				content: "€" attr(data-cost) "/kWh";
				top: 16px;
				font-size: 12px;
				white-space: nowrap;
				text-transform: none;
			}
			
			b[data-country="UK"] {
				background: hsla(174, 74%, 56%, 0.5);
				/*turquoise */
				left: 1%;
				top: -2%;
			}
			
			b[data-country="Germany"] {
				background: hsla(300, 76%, 72%, 0.5);
				/* Violet */
				right: 0;
				top: 0%;
			}
			
			b[data-country="France"] {
				background: hsla(197, 71%, 73%, 0.5);
				/* skyblue */
				left: 58%;
				top: 15%;
			}
			
			b[data-country="Greece"] {
				background: hsla(0, 59%, 41%, 0.5);
				/* brown */
				left: 22%;
				top: -15%;
			}
			
			b[data-country="Ireland"] {
				background: hsla(120, 100%, 25%, 0.5);
				/* green */
				left: 10%;
				top: 30%;
			}
			
			b[data-country="Sweden"] {
				background: hsla(271, 76%, 53%, 0.7);
				/* blue */
				right: 20%;
				top: -15%;
			}
			
			b[data-country="Belgium"] {
				background: hsla(0, 53%, 58%, 0.5);
				/* indianred */
				left: 50%;
				top: 40%;
			}
			
			b[data-country="Norway"] {
				background: hsla(300, 100%, 25%, 0.5);
				/* purple */
				left: 32%;
				top: 5%;
			}
			
			b[data-size="1"] {
				font-size: 4em;
			}
			
			b[data-size="2"] {
				font-size: 5em;
			}
			
			b[data-size="3"] {
				font-size: 6em;
			}
			
			b[data-size="4"] {
				font-size: 7em;
			}
			
			b[data-size="5"] {
				font-size: 8em;
			}
			
			b[data-size="6"] {
				font-size: 9em;
			}
			
			b[data-size="7"] {
				font-size: 10em;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<h1>HTML5 dataset下的数据图效果实例页面</h1>
			<div class="demo">
				<div id="top">
					<p id="range">2000 <input id="year" type="range" min="2000" max="2010" value="2000" step="2"> 2010</p>
					<div id="title">2000</div>
					<div id="unsupport"></div>
				</div>
				<div id="dataset" role="main">
					<b data-country="UK" data-size="5"><i>UK</i></b>
					<b data-country="Germany" data-size="7"><i>Germany</i></b>
					<b data-country="France" data-size="4"><i>France</i></b>
					<b data-country="Greece" data-size="1"><i>Greece</i></b>
					<b data-country="Ireland" data-size="3"><i>Ireland</i></b>
					<b data-country="Sweden" data-size="2"><i>Sweden</i></b>
					<b data-country="Belgium" data-size="7"><i>Belgium</i></b>
					<b data-country="Norway" data-size="1"><i>Norway</i></b>
				</div>
				<p style="text-align:center;">数据提供：
					<a href="http://epp.eurostat.ec.europa.eu/tgm/table.do?tab=table&plugin=1&language=en&pcode=ten00115">Eurostat</a>
				</p>
			</div>
		</div>
		<script type="text/javascript">
			(function() {
				var electricitydata = {
					'2000': {
						'UK': [3, 0.1056],
						'Germany': [4, 0.1191],
						'France': [3, 0.0928],
						'Greece': [1, 0.0564],
						'Ireland': [2, 0.0795],
						'Sweden': [1, 0.0637],
						'Belgium': [4, 0.1171],
						'Norway': [1, 0.0720]
					},
					'2002': {
						'UK': [3, 0.1031],
						'Germany': [5, 0.1261],
						'France': [3, 0.0923],
						'Greece': [1, 0.0580],
						'Ireland': [2, 0.0883],
						'Sweden': [1, 0.0701],
						'Belgium': [3, 0.1137],
						'Norway': [3, 0.0927]
					},
					'2004': {
						'UK': [2, 0.0837],
						'Germany': [5, 0.1259],
						'France': [3, 0.0905],
						'Greece': [1, 0.0621],
						'Ireland': [3, 0.1055],
						'Sweden': [2, 0.0898],
						'Belgium': [4, 0.1145],
						'Norway': [3, 0.0985]
					},
					'2006': {
						'UK': [3, 0.0971],
						'Germany': [5, 0.1374],
						'France': [2, 0.0905],
						'Greece': [1, 0.0643],
						'Ireland': [5, 0.1285],
						'Sweden': [2, 0.0876],
						'Belgium': [4, 0.1123],
						'Norway': [4, 0.1101]
					},
					'2008': {
						'UK': [5, 0.1394],
						'Germany': [5, 0.1299],
						'France': [3, 0.0914],
						'Greece': [3, 0.0957],
						'Ireland': [6, 0.1559],
						'Sweden': [4, 0.1085],
						'Belgium': [6, 0.1500],
						'Norway': [4, 0.1179]
					},
					'2010': {
						'UK': [5, 0.1321],
						'Germany': [5, 0.1381],
						'France': [3, 0.0922],
						'Greece': [3, 0.0975],
						'Ireland': [7, 0.1589],
						'Sweden': [4, 0.1195],
						'Belgium': [4, 0.1449],
						'Norway': [6, 0.1484]
					}
				};

				var slider = document.getElementById("year"),
					title = document.querySelector("#title"),
					countries = document.querySelectorAll("#dataset b"),
					currentstats, elm,
					root = document.documentElement;

				if(countries[0].dataset == undefined) {
					document.querySelector("#unsupport").innerHTML += "<strong>您的浏览器不支持datasets. 需使用Opera 11.10+, Chrome 9+ 来查看该demo.</strong>";
				} else {
					function changeGraph() {
						title.textContent = slider.value;
						root.className = "yr" + slider.value;
						currentstats = electricitydata[slider.value];
						for(country in currentstats) {
							elm = document.querySelector("b[data-country='" + country + "']");
							elm.dataset.size = currentstats[country][0];
							elm.dataset.cost = currentstats[country][1];
						}
					}

					slider.addEventListener('change', changeGraph, false);
					changeGraph();
				}

			})();
		</script>
	</body>

</html>